<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch-picture</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
    <div id="app">
      

      <img :src="imgSrc[idx]" alt="">


<div class="input-num">
  <button @click="pre">上一张</button>
  <!-- <span>{{cnt}}</span> -->
  <button @click="next">下一张</button>
  <span>哈哈哈  {{ show() }}</span>

</div>

      </div> 

</body>
</html>

<script>
    var app = new Vue({
  el: '#app',
  data: {
    idx:0,
    imgSrc: ['https://tse2-mm.cn.bing.net/th/id/OIP.rSaqVweMJgQI63PknpFrUgAAAA?w=193&h=193&c=7&o=5&dpr=2&pid=1.7' 
    ,'https://tse1-mm.cn.bing.net/th/id/OIP.pa9IAnjcL2WvDkUSqYba_AHaHa?w=193&h=193&c=7&o=5&dpr=2&pid=1.7']
  },
  methods:{
    pre : function(){
      if(this.idx > 0 ){
        this.idx -- ;
      }
    },
    next : function () {
      if(this.idx == 0 ){
        this.idx++;
      }
    },
    show : function(){
      return 'hhh'
    }
  }
})
</script>